<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>A simple, responsive, and tiny CSS grid for humans - Pills</title>
  <meta name="description" content="A simple, responsive, and tiny CSS grid for humans - Pills">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="dist/pills.min.css">
</head>
<body>
  <div class='cover'>
  </div>
  <header>
    <div class="row">
      <div class="two columns">
        <h1>Pills Demo</h1>
      </div>
      <div class="ten columns">
        <nav class="nav-main">
          <ul>
            <li><a href="http://bit.ly/1UV8I0s">Github</a></li>
            <li target="_blank" class="cta"><a href="http://bit.ly/2aG8BEI">Download</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  
  <section class="spotlight">
    <div class="row">
      <div class="twelve columns">
        <iframe src="https://ghbtns.com/github-btn.html?user=rohitkrai03&repo=pills&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
        <iframe src="https://ghbtns.com/github-btn.html?user=rohitkrai03&repo=pills&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
        <iframe src="https://ghbtns.com/github-btn.html?user=rohitkrai03&type=follow&count=true&size=large" frameborder="0" scrolling="0" width="220px" height="30px"></iframe>
      </div>
      <div class="twelve columns">
        <h1><strong>Pills</strong> - A simple, responsive, and tiny CSS grid for humans. </h1>
        <h2>4kb, Mobile First Grid System, HTML5 Boilerplate Head, Inspired by Simplicity and Control, <br> IE8+, Firefox, Chrome, Safari, Opera, Free to use and Abuse.
        </h2>
      </div>
      
    </div>
  </section>


  <section class="demo">
  <div class='row'>
    <h1 class='align-center'>Part One</h1>
    <div class="row">
      <div class="column whole">
        <pre>.whole</pre>
      </div>
    </div>
    <div class="row">
      <div class="column half">
        <pre>.half</pre>
      </div>
      <div class="column half">
        <pre>.half</pre>
      </div>
    </div>
    <div class="row">
      <div class="column one-third">
        <pre>.one-third</pre>
      </div>
      <div class="column two-thirds">
        <pre>.two-thirds</pre>
      </div>
    </div>
    <div class="row">
      <div class="column one-quarter">
        <pre>.one-quarter</pre>
      </div>
      <div class="column three-quarters">
        <pre>.three-quarters</pre>
      </div>
    </div>
    <div class="row">
      <div class="column one-fifth">
        <pre>.one-fifth</pre>
      </div>
      <div class="column four-fifths">
        <pre>.four-fifths</pre>
      </div>
    </div>
    <div class="row">
      <div class="column two-fifths">
        <pre>.two-fifths</pre>
      </div>
      <div class="column three-fifths">
        <pre>.three-fifths</pre>
      </div>
    </div>
  </div>
  <br />
  <div class="row">
    <h1 class="align-center">Part Two</h1>
    <div class="row">
      <div class="twelve column">
        <pre>.twelve</pre>
      </div>
    </div>
    <div class="row">
      <div class="six column">
        <pre>.six</pre>
      </div>
      <div class="six column">
        <pre>.six</pre>
      </div>
    </div>
    <div class="row">
      <div class="four column">
        <pre>.four</pre>
      </div>
      <div class="eight column">
        <pre>.eight</pre>
      </div>
    </div>
    <div class="row">
      <div class="three column">
        <pre>.three</pre>
      </div>
      <div class="two column">
        <pre>.two</pre>
      </div>
      <div class="seven column">
        <pre>.seven</pre>
      </div>
    </div>
    <div class="row">
      <div class="five column">
        <pre>.five</pre>
      </div>
      <div class="three column">
        <pre>.three</pre>
      </div>
      <div class="two column">
        <pre>.two</pre>
      </div>
      <div class="two column">
        <pre>.two</pre>
      </div>
    </div>
    <div class="row">
      <div class="two column">
        <pre>.two</pre>
      </div>
      <div class="four column">
        <pre>.four</pre>
      </div>
      <div class="six column">
        <pre>.six</pre>
      </div>
    </div>
    <div class="row">
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
      <div class="one column">
        <pre>.one</pre>
      </div>
    </div>
  </div>
  </section>

  <section class="usage">
    <div class="row">
      <div class="column whole">
        <h2>Download</h2>
        <p class="lead">You have two main options for using pills in your&nbsp;project.</p>
      </div>
    </div>
    <div class="row">
      <div class="column one-third">
        <h3>A. bower or npm</h3>
        <p>Pills can be installed using the <a href="http://bower.io">Bower</a> or <a href="https://www.npmjs.com/">npm</a> package&nbsp;manager.</p>
        <pre><code>bower install pills</code></pre>
        <pre><code>npm install pills</code></pre>
      </div>
      <div class="column one-third">
        <h3>B. Manual</h3>
        <p><a href="https://github.com/rohitkrai03/pills/archive/gh-pages.zip">Download the ZIP</a>, extract the source code, and copy <code>pills.min.css</code> into your project’s&nbsp;directory.</p>
      </div>
      <div class="column one-third">
        <h3>Elsewise</h3>
        <p>Of course, you could also clone <a href="https://github.com/rohitkrai03/pills">the repository</a> using your terminal, or even add it as a <a href="http://git-scm.com/book/en/Git-Tools-Submodules">submodule</a> of your&nbsp;project.</p>
      </div>
    </div>
    <div class="row">
      <div class="column whole">
        <h2>Installation</h2>
        <p class="lead">Once you’ve acquired the pills source code, there’s a couple of other things you’ll&nbsp;probably want&nbsp;to&nbsp;do.</p>
      </div>
    </div>
    <div class="row">
      <div class="column whole">
        <h3>1. Stylesheet</h3>
        <p>Add the following stylesheet to the <code>&lt;head&gt;</code> section of your project’s HTML. If you didn’t use Bower, you may need to adjust the path to the CSS file to match your file&nbsp;structure.</p>
        <pre><code>&lt;link rel="stylesheet" href="bower_components/pills/dist/pills.min.css"&gt;</code></pre>
      </div>
    </div>
    <div class="row">
      <div class="column whole">
        <h3>2. Viewport</h3>
        <p>Set the scale of your viewport to the width of the device. Placing the following tag in the <code>&lt;head&gt;</code> of your HTML ensures the viewport doesn’t load zoomed-out on mobiles and&nbsp;tablets.</p>
        <pre><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code></pre>
      </div>
    </div>
  </section>

  <footer>
    <div class="row">
      <div class="column half">
        <div class="center-on-mobiles">
          <p>© Rohit Rai — All rights reserved.</p>
        </div>
      </div>
      <div class="column half">
        <div class="align-right center-on-mobiles">
          <p>This project is <a href="https://github.com/rohitkrai03/pills">open-source</a> and accepting pull&nbsp;requests. Fork&nbsp;at&nbsp;will.</p>
        </div>
      </div>
    </div>
  </footer>
  <!--google analytics tracking code here-->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-38381756-2', 'auto');
    ga('send', 'pageview');

  </script>

</body>
</html>
